<template>
    <div class="contain">
        <div class="mui-card" v-for='item in mygoods' :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                     <div id="switch">
                        <div class="mui-switch mui-switch-blue mui-switch-mini" :class="item.isAdd?'mui-active':''" @click="isAdd(item)">
                            <div class="mui-switch-handle"></div>
                        </div>
                     </div>
                   <div>
                       <img style="width:40px;height:55px; " :src="item.img">
                   </div>
                   <div class="money-num">
                       <div style="margin-bottom:10px;"><span style="font-size:12px;white-space:nowrap;font-weight:bolder;" class="goodName">{{item.title}}</span></div>
                       <div style="margin-bottom:8px;display:flex; justify-content:space-between;align-items: center;">
                           <span style="color:red;">￥{{item.price}}</span>
                           <span>
                               <div id="numbox" class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
                                    <button class="mui-btn mui-btn-numbox-minus" @click="reduce(item.count,item.id,item)" type="button">-</button>
                                    <input v-model="item.count" id="test" ref="numValue" class="mui-input-numbox" type="number"/>
                                    <button class="mui-btn mui-btn-numbox-plus" type="button" @click="add(item.count,item.id,item)">+</button>
                               </div>
                           </span>
                           <span style="color:blue;" @click='del(index,item.id)'>删除</span>
                       </div>
                   </div>
                </div>
            </div>
		</div>

        <div class="mui-card" v-show='word'>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                   <div style="color:gray;font-size:13px;">
                       <div style="margin-bottom:10px;"><span>总计（不含运费）</span></div>
                       <div>已勾选商品{{count}}<span style="color:red;">&nbsp;</span>&nbsp;件，总价：{{money}}<span style="color:red;">￥</span></div>
                   </div>
                   <div>
                       <mt-button size="small" type="danger" @click="settle">去结算</mt-button>
                   </div>
                </div>
            </div>
		</div>       
        <div  class="cartWord" v-show="!word">
            <img  style="width:100px;height:100px;border-radius:50%;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564808089784&di=d739dcec22615669734d8682e7d0949d&imgtype=0&src=http%3A%2F%2Fwww.wzdrugstore.com%2Fuppic%2Findex_09.png">
            <div><span style="font-size:14px;">购物车空空如也<br>来购几件好货吧</span></div>
            <mt-button  class="goToShop" type="danger" size="small" plain @click="goShop">去逛逛</mt-button>      
        </div>
    </div>
</template>
<script>
import mui from '../../../lib/mui/js/mui.js'
export default{
     data() {
        return {
            mygoods:"",
            flag:localStorage.getItem('flag'),
            words:false,
            money:0,
            count:0,
            
        }
    },
    created() {
         this.$http.post('http://192.168.0.197:88/getMyGoods',{belongId:localStorage.getItem('usernumber'),'status':"0"},{emulateJSON:true})
            .then(res=>{
            var tmp=res.body.data;
            
             tmp.forEach(data=>{
                        data.isAdd=false;
                })
                    this.mygoods=tmp;
                    console.log('shangpin ')
                    console.log(this.mygoods)
            
        })
       
        console.log(this.word)
    },
    methods: {
        goShop(){
            this.$router.push({path:'/HomePage/buy'})
        },
        settle(){
            if(!this.count==0){
            mui.confirm('付款吗？','结算',['是','否'],()=>{
                this.mygoods.forEach((value,index)=>{
                    this.del(index,value.id)
                })
                this.toShopCart();
               mui.toast('付款成功',{ duration:1000, type:'div' }) 
            },'div') 
            }
           
           if(this.mygoods.length<=0){
               this.flag=false;
           }
        },
        leftCount(){
            if(this.mygoods.length<=0){
               this.flag=false;
           }
        },
        del(index,id){
            this.mygoods.splice(index,1);
             this.$http.post('http://192.168.0.197:88/deleteMyGoodsById',{belongId:localStorage.getItem('usernumber'),'id':id},{emulateJSON:true})
            .then(res=>{
                 console.log(res)
            })
            this.allMoney();
            this.allCount();
            this.$store.commit('setNum',this.count)
        },
        toShopCart(){
             this.$http.post('http://192.168.0.197:88/getMyGoods',{belongId:localStorage.getItem('usernumber'),'status':"0"},{emulateJSON:true})
            .then(res=>{
            var tmp=res.body.data;
            if(!tmp){
             tmp.forEach(data=>{
                        data.isAdd=false;
                    })
                    this.mygoods=tmp;
                    console.log('shangpin ')
                    console.log(this.mygoods)
                    }
            
        })
        
    },
    anon(){
        this.$router.push({path:'/HomePage/buy'})
        },
    allMoney(){
        var tmp=0;
        this.mygoods.forEach(value=>{
            if(value.isAdd){
                   tmp+=value.count*value.price;
               }
        })
        this.money=tmp;
    },
    allCount(){
        var tmp=0;
        this.mygoods.forEach(value=>{
            if(value.isAdd){
                tmp+=value.count;
            }
        })
        this.count= tmp;
    },
    isAdd(item){
        item.isAdd=!item.isAdd;
        this.allMoney();
            this.allCount();
    },
    reduce(num,id,item){
      
        if(num>=2){
              num--;
        item.count--;
        }
       
         this.$http.post('http://192.168.0.197:88/updateForCar',{belongId:localStorage.getItem('usernumber'),'id':id,count:num},{emulateJSON:true})
            .then(res=>{
                if(res.body.data==1){
                    console.log("success")
                    localStorage.setItem('allCount',this.allCount)
                }
            })
            this.allMoney();
            this.allCount();
    },
    add(num,id,item){
        num++;
         if(num<=item.left_count){
              num++;
        item.count++;
        }
         this.$http.post('http://192.168.0.197:88/updateForCar',{belongId:localStorage.getItem('usernumber'),'id':id,count:num},{emulateJSON:true})
            .then(res=>{
                if(res.body.data==1){
                    localStorage.setItem('allCount',this.allCount)
                    // this.$store.commit('setNum',this.allCount);/
                }
            })
            this.allMoney();
            this.allCount();
    }
         
    },
    mounted() {
        console.log(this.flag)
    },
    computed:{
        word(){
            return this.mygoods.length>0?true:false;
        }
    },
    watch:{
        mygoods(){
            if(this.mygoods.length>=0){
               this.$store.getters.setCart
            }
        }
    }

   
   
    
}
</script>
<style scoped>
     .contain{
         
     }
     .cartWord{
         text-align: center;
         position: relative;
         top:20%;
     }
     .goToShop{
         color: black;
         border: black solid 1px;
         width: 100px;
         margin-top: 10px;
         
     }
     .goodName{
        max-width: 188px;
        display: inline-block;
        text-overflow :ellipsis ;   
        overflow: hidden;         
    }
    .mui-card-content-inner{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .money-num{
        margin-left: 5px;
        display: flex;
        flex-direction: column;
    }
    .mui-numbox{
        width: 100px;
        height: 22px;
        font-size: 12px;
    }
    #test{
        font-size: 12px;
    }
</style>